const gulp =require('gulp')
const htmlmin= require('gulp-htmlmin')
const uglify = require('gulp-uglify')
const babel =require('gulp-babel')
const connect=require('gulp-connect')
const sass=require('gulp-sass')
const cleanCss = require('gulp-clean-css')


// // gulp.task('default',()=>{
// //     console.log('default gulp task 123 ')
// })
//1.压缩html
gulp.task('html', () => {
    gulp.src('src/**/*.html')
      .pipe(htmlmin({
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
      }))
      .pipe(gulp.dest('dist'))
      .pipe(connect.reload())
    //   .pipe(connect.reload())
  })

//2.压缩js
gulp.task('js',()=>{
  gulp.src('src/js/**/*.js')
  //es6转es5
  .pipe(babel({
    presets: ['@babel/env']
  }))
  // .pipe(uglify())
  .pipe(gulp.dest('dist/js'))
  .pipe(connect.reload())
})
//3.libs任务 文件的复制
gulp.task('libs', () => {
  gulp.src('src/libs/**/*')
    .pipe(gulp.dest('dist/libs'))
})
// 4.img任务：文件的复制
gulp.task('img', () => {
  gulp.src('src/images/**/*')
    .pipe(gulp.dest('dist/images'))
})
//css任务：sass编译成css 压缩
gulp.task('css', () => {
  gulp.src('src/css/**/*.scss')
    .pipe(sass())
    .pipe(cleanCss())
    .pipe(gulp.dest('dist/css'))
})


// 5.sever任务 ：运行服务器
gulp.task('server',()=>{
  connect.server({
    root:'dist',
    livereload:true,
    port:1226
  })
})

//6.watch任务 监听文件的修改，自动重启对应任务
gulp.task('watch', () => {
  gulp.watch('src/**/*.html', ['html'])
  gulp.watch('src/js/**/*.js', ['js'])
  gulp.watch('src/css/**/*.scss', ['css'])
})

gulp.task('default', ['html','css', 'js', 'img', 'libs', 'server', 'watch'])

